{#
  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import apple_app_store_button, google_play_button with context %}

{% set android_url = play_store_url('vpn', campaign) %}
{% set ios_url = app_store_url('vpn', campaign) %}
{% set redirect_url = 'http://www.mozilla.org/products/vpn/mobile/app/?product=vpn&campaign=' + campaign %}
{% set local_currency_notice = country_code in ["UG", "SN", "UA", "KE"] and ftl_has_messages('vpn-pricing-transaction-may-be-in') %}

<section class="mzp-c-split vpn-pricing-mobile-subscription mzp-l-split-center-on-sm-md mzp-t-content-xl">
  <div class="mzp-c-split-container">
    <div class="mzp-c-split-body">
      {% if heading %}
        <h2 class="u-title-lg">{{ heading }}</h2>
      {% endif %}

      <div class="c-pricing-block-mobile-wrapper">
        <div class="c-pricing-block-mobile">
          <p class="c-pricing-block-mobile-tag">
            {{ ftl('vpn-shared-pricing-recommended-offer') }}
          </p>

          <h2 class="c-pricing-block-mobile-heading">
            {{ ftl('vpn-pricing-annual') }}
          </h2>

          <h3 class="c-pricing-block-mobile-sub-heading">
            {{ vpn_mobile_monthly_price(plan='12-month', country_code=country_code, lang=LANG) }}
          </h3>

          {% if local_currency_notice %}
            <p class="c-pricing-block-mobile-currency-info">
              {{ ftl('vpn-pricing-transaction-may-be-in') }}
            </p>
          {% endif %}

          <p class="c-pricing-block-mobile-total">
            {{ vpn_mobile_total_price(country_code=country_code, lang=LANG) }}
          </p>
        </div>

        <div class="c-pricing-block-mobile">
          <h2 class="c-pricing-block-mobile-heading">
            {{ ftl('vpn-pricing-monthly') }}
          </h2>

          <h3 class="c-pricing-block-mobile-sub-heading">
            {{ vpn_mobile_monthly_price(plan='monthly', country_code=country_code, lang=LANG) }}
          </h3>

          {% if local_currency_notice %}
            <p class="c-pricing-block-mobile-currency-info">
              {{ ftl('vpn-pricing-transaction-may-be-in') }}
            </p>
          {% endif %}
        </div>
      </div>

      <ol class="vpn-pricing-mobile-steps u-body-lg">
        {% if android_sub_only %}
          <li><span>{{ ftl('vpn-pricing-sign-up-on-your-android-device', fallback='vpn-pricing-sign-up-on-your-mobile-device') }}</span></li>
        {% else %}
          <li><span>{{ ftl('vpn-pricing-sign-up-on-your-mobile-device') }}</span></li>
        {% endif %}
        <li><span>{{ ftl('vpn-pricing-connect-up-to-platforms', fallback='vpn-pricing-connect-up-to', devices=connect_devices) }}</span></li>
        <li><span>{{ ftl('vpn-pricing-access', servers=connect_servers, countries=connect_countries) }}</span></li>
      </ol>

      <p class="vpn-pricing-desktop-instruction u-body-lg">
        {% if android_sub_only %}
          {{ ftl('vpn-pricing-scan-qrcode-to-download-android', fallback='vpn-pricing-scan-qrcode-to-download') }}
        {% else %}
          {{ ftl('vpn-pricing-scan-qrcode-to-download') }}
        {% endif %}
      </p>

      {{ picture(
        url='img/products/vpn/landing-refresh/devices.svg',
        sources=[
          {
            'media': '(min-width: 769px)',
            'srcset': {
              'img/placeholder.png': 'default'
            }
          }
        ],
        optional_attributes={
          'class': 'vpn-pricing-devices-image',
          'width': '310',
          'height': '155',
          'loading': 'lazy'
        }
      ) }}

      <ul class="vpn-pricing-mobile-badges">
        {% if not android_sub_only %}
          <li class="ios-badge">
            {{ apple_app_store_button(
              product="vpn",
              href=ios_url,
              extra_data_attributes={
                'testid': 'get-vpn-ios-app-store'
              }
            ) }}
          </li>
        {% endif %}
        <li class="android-badge">
          {{ google_play_button(
            product="vpn",
            href=android_url,
            extra_data_attributes={
              'testid': 'get-vpn-google-play-store'
            }
          ) }}
        </li>
      </ul>

      <p class="vpn-pricing-mobile-button">
        {# Only show iOS download CTA if Apple App Store subscriptions are available in a person's country. See #15328. #}
        {% if not android_sub_only %}
        <a class="ga-product-download ios-cta mzp-c-button mzp-t-product mzp-t-xl" href="{{ ios_url }}" data-cta-text="App Store" data-cta-type="mozilla_vpn">
          {{ ftl('vpn-pricing-download-the-app') }}
        </a>
        {% endif %}

        <a class="ga-product-download android-cta mzp-c-button mzp-t-product mzp-t-xl" href="{{ android_url }}" data-cta-text="Play Store" data-cta-type="mozilla_vpn">
          {{ ftl('vpn-pricing-download-the-app') }}
        </a>
      </p>
    </div>
    <div class="mzp-c-split-media mzp-l-split-h-center">
      <div class="vpn-pricing-mobile-qrcode-wrapper">
        <div class="vpn-pricing-mobile-qrcode-image" data-testid="get-vpn-qr-code">
          {% if android_sub_only %}
            {{ qrcode(android_url, 10) }}
          {% else %}
            {{ qrcode(redirect_url, 10) }}
          {% endif %}
        </div>
        {{ picture(
          url='img/products/vpn/landing-refresh/qrcode-background.svg',
          sources=[
            {
              'media': '(max-width: 767px)',
              'srcset': {
                'img/placeholder.png': 'default'
              }
            }
          ],
          optional_attributes={
            'class': 'vpn-pricing-qrcode-background',
            'width': '480',
            'height': '508',
            'loading': 'lazy'
          }
        ) }}
      </div>
    </div>
  </div>
</section>

<div class="vpn-pricing-mobile-unsupported-language mzp-l-content mzp-t-content-xl">
  {% include 'products/vpn/includes/unsupported-language.html' %}
</div>
